<% content_for(:head) do %>
  <title>Pupilfirst LMS Style Guide</title>
  <%= vite_javascript_tag 'styleguide', nonce: true %>
<% end %>

<main class="min-h-screen flex flex-col">
  <section class="w-full grow mx-auto">
    <header class="'w-full text-center border-b">
      <div class="container max-w-2xl mx-auto px-4 py-4">
        <h1>Style Guide</h1>
      </div>
    </header>
    <div class="container max-w-2xl mx-auto p-4">
      <div class="bg-gray-50 pt-6 px-2 pb-2 mt-3 shadow rounded-lg">
        <h5 class="ps-1 ">Button</h5>
        <div class="bg-white border p-6 rounded-lg mt-2">
          <div class="">
            <p class="text-xs text-gray-600 text-center md:text-left">Small</p>
            <div class="flex flex-wrap md:justify-start justify-center">
              <button class="btn btn-primary btn-small mt-2">Primary</button>
              <button class="btn btn-primary btn-small disabled ms-3 mt-2">
                Primary
              </button>
              <button class="btn btn-primary btn-small ms-3 mt-2">
                <i class="fas fa-spinner fa-spin me-2"></i>
                Saving...
              </button>
            </div>
          </div>
          <div class="mt-5">
            <p class="text-xs text-gray-600 text-center md:text-left">Normal</p>
            <div class="flex flex-wrap md:justify-start justify-center">
              <button class="btn btn-primary mt-2">Primary</button>
              <button class="btn btn-primary disabled ms-3 mt-2">
                Primary
              </button>
              <button class="btn btn-primary ms-3 mt-2">
                <i class="fas fa-spinner fa-spin me-2"></i>
                Saving...
              </button>
            </div>
          </div>
          <div class="flex flex-col mt-5">
            <p class="text-xs text-gray-600 text-center md:text-left">Large</p>
            <div class="flex flex-wrap md:justify-start justify-center">
              <button class="btn btn-primary btn-large mt-2">Primary</button>
              <button class="btn btn-primary btn-large disabled ms-3 mt-2">
                Primary
              </button>
              <button class="btn btn-primary btn-large ms-3 mt-2">
                <i class="fas fa-spinner fa-spin me-2"></i>
                Saving...
              </button>
            </div>
          </div>
          <div class="flex flex-col mt-5">
            <p class="text-xs text-gray-600 text-center md:text-left">Ghost</p>
            <div class="flex flex-wrap md:justify-start justify-center">
              <button class="btn btn-primary-ghost mt-2">Primary</button>
              <button class="btn btn-primary-ghost disabled ms-3 mt-2">
                Primary
              </button>
              <button class="btn btn-primary-ghost ms-3 mt-2">
                <i class="fas fa-spinner fa-spin me-2"></i>
                Saving...
              </button>
            </div>
          </div>

          <div class="flex flex-col mt-5">
            <p class="text-xs text-gray-600 text-center md:text-left">
              Default
            </p>
            <div class="flex flex-wrap md:justify-start justify-center">
              <button class="btn btn-default mt-2">Default</button>
              <button class="btn btn-default disabled ms-3 mt-2">
                Default
              </button>
              <button class="btn btn-default ms-3 mt-2">
                <i class="fas fa-spinner fa-spin me-2"></i>
                Saving...
              </button>
            </div>
          </div>
          <div class="flex flex-col mt-5">
            <p class="text-xs text-gray-600 text-center md:text-left">
              Secondary
            </p>
            <div class="flex flex-wrap md:justify-start justify-center">
              <button class="btn btn-secondary mt-2">Secondary</button>
              <button class="btn btn-secondary disabled ms-3 mt-2">
                Secondary
              </button>
              <button class="btn btn-secondary ms-3 mt-2">
                <i class="fas fa-spinner fa-spin me-2"></i>
                Saving...
              </button>
            </div>
          </div>
          <div class="flex flex-col mt-5">
            <p class="text-xs text-gray-600 text-center md:text-left">
              Warning
            </p>
            <div class="flex flex-wrap md:justify-start justify-center">
              <button class="btn btn-warning mt-2">Warning</button>
              <button class="btn btn-warning disabled ms-3 mt-2">
                Warning
              </button>
            </div>
          </div>
          <div class="flex flex-col mt-5">
            <p class="text-xs text-gray-600 text-center md:text-left">Danger</p>
            <div class="flex flex-wrap md:justify-start justify-center">
              <button class="btn btn-danger mt-2">Danger</button>
              <button class="btn btn-danger disabled ms-3 mt-2">Danger</button>
            </div>
          </div>
          <div class="flex flex-col mt-5">
            <p class="text-xs text-gray-600 text-center md:text-left">
              Success
            </p>
            <div class="flex flex-wrap md:justify-start justify-center">
              <button class="btn btn-success mt-2">Success</button>
              <button class="btn btn-success disabled ms-3 mt-2">
                Success
              </button>
              <button class="btn btn-success ms-3 mt-2">
                <i class="fas fa-spinner fa-spin me-2"></i>
                Saving...
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-gray-50 pt-6 px-2 pb-2 mt-6 shadow rounded-lg">
        <h5 class="ps-1 ">Toggle</h5>
        <div class="bg-white border p-6 rounded-lg mt-2">
          <div class="flex flex-col">
            <%# Toggle %>
            <div>
              <input
                type="checkbox"
                class="hidden toggle-input"
                id="ToggleID"
              />
              <label for="ToggleID" class="toggle-label"><span></span></label>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-gray-50 pt-6 px-2 pb-2 mt-6 shadow rounded-lg">
        <h5 class="ps-1 ">Checkbox</h5>
        <div class="bg-white border p-6 rounded-lg mt-2">
          <div class="flex flex-col">
            <%#  Checkbox %>
            <div>
              <input
                class="checkbox-input h-4 w-4 rounded border border-gray-300 text-primary-500 focus:ring-focusColor-500"
                id="CheckboxID"
                type="checkbox"
              />
              <label class="checkbox-label ps-1 cursor-pointer text-sm" for="CheckboxID">
                Check Box
              </label>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-gray-50 pt-6 px-2 pb-2 mt-6 shadow rounded-lg">
        <h5 class="ps-1 ">Disabling Cover</h5>
        <div class="bg-white border p-6 rounded-lg mt-2">
          <div id="styleguide__disabling-cover-root"></div>
        </div>
      </div>

      <div class="bg-gray-50 pt-6 px-2 pb-2 mt-6 shadow rounded-lg">
        <h5 class="ps-1 ">Dropdown</h5>
        <div class="bg-white border p-6 rounded-lg mt-2">
          <div class="flex h-48">
            <div class="dropdown inline-block relative">
              <button
                class="dropdown__btn appearance-none flex bg-gray-50 hover:bg-primary-100 hover:text-primary-500 items-center relative justify-between focus:outline-none font-semibold text-sm px-3 py-2 rounded w-full"
              >
                <span>Courses</span>
                <i class="fas fa-chevron-down text-xs ms-3 font-semibold"></i>
              </button>
              <ul
                class="dropdown__list bg-white shadow-lg rounded mt-1 border absolute overflow-hidden min-w-full w-auto z-20"
              >
                <li
                  class="cursor-pointer block p-3 text-xs font-semibold text-gray-900 border-b border-gray-50 bg-white hover:text-primary-500 hover:bg-gray-50 whitespace-nowrap"
                >
                  Dropdown list text
                </li>
                <li
                  class="cursor-pointer block p-3 text-xs font-semibold text-gray-900 border-b border-gray-50 bg-white hover:text-primary-500 hover:bg-gray-50 whitespace-nowrap"
                >
                  Dropdown list text long
                </li>
                <li
                  class="cursor-pointer block p-3 text-xs font-semibold text-gray-900 border-b border-gray-50 bg-white hover:text-primary-500 hover:bg-gray-50 whitespace-nowrap"
                >
                  Dropdown list text looooong
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-gray-50 pt-6 px-2 pb-2 mt-6 shadow rounded-lg">
        <h5 class="ps-1 ">Avatar</h5>
        <div class="bg-white border p-6 rounded-lg mt-2">
          <div class="flex items-end">
            <div class="px-3 text-center">
              <div
                class="avatar-lg w-14 h-14 rounded-full bg-gray-500 text-white flex items-center justify-center mx-auto"
              >
                <i class="fas fa-user-alt text-3xl"></i>
              </div>
              <span class="text-xs mt-2 font-semibold">avatar-lg</span>
            </div>
            <div class="px-3 text-center">
              <div
                class="avatar w-11 h-11 rounded-full bg-gray-500 text-white flex items-center justify-center mx-auto"
              >
                <i class="fas fa-user-alt text-2xl"></i>
              </div>
              <span class="text-xs mt-2 font-semibold">avatar-default</span>
            </div>
            <div class="px-3 text-center">
              <div
                class="avatar-sm w-8 h-8 rounded-full bg-gray-500 text-white flex items-center justify-center mx-auto"
              >
                <i class="fas fa-user-alt"></i>
              </div>
              <span class="text-xs mt-2 font-semibold">avatar-sm</span>
            </div>
            <div class="px-3 text-center">
              <div
                class="avatar-xs w-6 h-6 rounded-full bg-gray-500 text-white flex items-center justify-center mx-auto"
              >
                <i class="fas fa-user-alt text-xs"></i>
              </div>
              <span class="text-xs mt-2 font-semibold">avatar-xs</span>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-gray-50 pt-6 px-2 pb-2 mt-6 shadow rounded-lg">
        <h5 class="ps-1 ">Textfield</h5>
        <div class="bg-white border p-6 rounded-lg mt-2">
          <div class="flex flex-col">
            <div class="w-full">
              <label class="inline-block tracking-wide text-xs font-semibold">
                Label
              </label>
              <input
                class="appearance-none h-10 mt-1 block w-full border border-gray-300 rounded py-2 px-4 text-sm bg-gray-50 hover:bg-gray-50 focus:outline-none focus:bg-white focus:border-primary-400"
                type="text"
                placeholder="Input Text"
              />
            </div>
            <div class="w-full mt-4">
              <label class="inline-block tracking-wide text-xs font-semibold">
                Label*
              </label>
              <input
                class="appearance-none h-10 mt-1 block w-full border border-red-500 rounded py-2 px-4 text-sm bg-red-100 hover:bg-gray-50 focus:outline-none focus:bg-white focus:border-primary-400"
                type="text"
                placeholder="Input Text"
              />
              <div class="text-red-600 text-xs mt-2">
                <i class="fa fa-exclamation-triangle"></i>
                <span class="ms-1">Please fill out this field.</span>
              </div>
            </div>
            <div class="w-full mt-4">
              <label class="inline-block tracking-wide text-xs font-semibold">
                Password*
              </label>
              <input
                class="appearance-none h-10 mt-1 block w-full border border-gray-300 rounded py-2 px-4 text-sm bg-gray-50 hover:bg-gray-50 focus:outline-none focus:bg-white focus:border-primary-400"
                type="password"
                placeholder="Input Text"
              />
              <div class="text-green-600 text-xs mt-2">
                <i class="fas fa-check-circle"></i>
                <span class="ms-1">Awesome Password</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-gray-50 pt-6 px-2 pb-2 mt-6 shadow rounded-lg">
        <h5 class="ps-1 ">Badges</h5>
        <div class="bg-white border p-6 rounded-lg mt-2">
          <div class="flex flex-col">
            <p class="text-xs font-semibold">Subtle</p>
            <div class="mt-3">
              <span class="inline-block bg-gray-50 rounded px-2 pb-1 truncate">
                <span class="text-xs font-semibold text-gray-900">Default</span>
              </span>
              <span
                class="inline-block bg-green-100 rounded px-2 pb-1 ms-3 truncate"
              >
                <span class="text-xs font-semibold text-green-800"
                  >Success</span
                >
              </span>
              <span
                class="inline-block bg-red-100 rounded px-2 pb-1 ms-3 truncate"
              >
                <span class="text-xs font-semibold text-red-600">Error</span>
              </span>
              <span
                class="inline-block bg-blue-100 rounded px-2 pb-1 ms-3 truncate"
              >
                <span class="text-xs font-semibold text-blue-600">Info</span>
              </span>
              <span
                class="inline-block bg-orange-100 rounded px-2 pb-1 ms-3 truncate"
              >
                <span class="text-xs font-semibold text-orange-600"
                  >Warning</span
                >
              </span>
              <span
                class="inline-block bg-primary-100 rounded px-2 pb-1 ms-3 w-25 truncate"
              >
                <span class="text-xs font-semibold text-primary-600"
                  >Loooooong text will be truncated</span
                >
              </span>
            </div>
          </div>
          <div class="flex flex-col mt-8">
            <p class="text-xs font-semibold">Bold</p>
            <div class="mt-3">
              <span
                class="inline-block bg-gray-800 text-gray-50 rounded px-2 pb-1 truncate"
              >
                <span class="text-xs font-semibold text-truncate">Default</span>
              </span>
              <span
                class="inline-block bg-green-600 text-green-100 rounded px-2 pb-1 ms-3 truncate"
              >
                <span class="text-xs font-semibold text-truncate">Success</span>
              </span>
              <span
                class="inline-block bg-red-500 text-red-100 rounded px-2 pb-1 ms-3 truncate"
              >
                <span class="text-xs font-semibold text-truncate">Error</span>
              </span>
              <span
                class="inline-block bg-blue-500 text-blue-100 rounded px-2 pb-1 ms-3 truncate"
              >
                <span class="text-xs font-semibold">Info</span>
              </span>
              <span
                class="inline-block bg-orange-500 text-orange-100 rounded px-2 pb-1 ms-3 truncate"
              >
                <span class="text-xs font-semibold">Warning</span>
              </span>
              <span
                class="inline-block bg-primary-500 text-primary-100 rounded px-2 pb-1 ms-3 w-25 truncate"
              >
                <span class="text-xs font-semibold"
                  >Loooooong text will be truncated</span
                >
              </span>
            </div>
          </div>
          <div class="flex flex-col mt-8">
            <p class="text-xs font-semibold">Bold</p>
            <div class="mt-3">
              <span
                class="inline-flex items-center justify-center bg-gray-800 text-gray-50 rounded truncate"
              >
                <span class="text-xs font-semibold px-2 py-1">Default</span>
                <span class="pe-2">
                  <i class="fas fa-times"></i>
                </span>
              </span>
              <span
                class="inline-flex items-center justify-center bg-green-600 text-green-100 rounded ms-3 truncate"
              >
                <span class="text-xs font-semibold px-2 py-1">Success</span>
                <span>
                  <i class="fas fa-times me-2"></i>
                </span>
              </span>
              <span
                class="inline-flex items-center justify-center bg-red-500 text-red-100 rounded ms-3 truncate"
              >
                <span class="text-xs font-semibold px-2 py-1">Error</span>
                <span>
                  <i class="fas fa-times me-2"></i>
                </span>
              </span>
              <span
                class="inline-flex items-center justify-center bg-blue-500 text-blue-100 rounded ms-3 truncate"
              >
                <span class="text-xs font-semibold px-2 py-1">Info</span>
                <span>
                  <i class="fas fa-times me-2"></i>
                </span>
              </span>
              <span
                class="inline-flex items-center justify-center bg-orange-500 text-orange-100 rounded ms-3 truncate"
              >
                <span class="text-xs font-semibold px-2 py-1">Warning</span>
                <span>
                  <i class="fas fa-times me-2"></i>
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-gray-50 pt-6 px-2 pb-2 mt-6 shadow rounded-lg">
        <h5 class="ms-1">Markdown Syntax Highlighting</h5>
        <div class="bg-white border p-6 rounded-lg mt-2">
          <div id="styleguide__markdown-syntax-highlighting-root"></div>
        </div>
      </div>

      <div class="bg-gray-50 pt-6 px-2 pb-2 mt-6 shadow rounded-lg">
        <h5 class="ms-1">Skeleton Loading</h5>
        <div id="styleguide__skeleton-loading-root"></div>
      </div>
    </div>
  </section>
</main>
